<template>
  <view class="facility-add-container">
    <view class="form-header">
      <view class="back-btn" @click="cancel">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">{{ isEditing ? '编辑设施' : '添加设施' }}</text>
    </view>
    
    <scroll-view scroll-y class="form-scroll" :style="{ height: scrollHeight }">
      <view class="form-content">
        <view class="form-section">
          <text class="section-title">基本信息</text>
          
          <view class="form-item">
            <text class="form-label">设施类型 <text class="required">*</text></text>
            <view class="type-grid">
              <view 
                v-for="type in facilityTypes" 
                :key="type.value"
                class="type-item"
                :class="{ active: facilityData.type === type.value }"
                @click="selectType(type.value)"
              >
                <view class="type-icon" v-html="type.icon"></view>
                <text class="type-name">{{ type.name }}</text>
              </view>
              <view class="type-item other-type" @click="navigateToOther">
                <view class="type-icon">
                  <svg viewBox="0 0 24 24" width="100%" height="100%">
                    <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
                    <path d="M12 8v8M8 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </view>
                <text class="type-name">其他设施</text>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">设施名称 <text class="required">*</text></text>
            <input class="form-input" v-model="facilityData.name" placeholder="请输入设施名称" />
          </view>
          
          <view class="form-item">
            <text class="form-label">设施描述</text>
            <textarea class="form-textarea" v-model="facilityData.description" placeholder="请输入设施描述" />
          </view>
        </view>
        
        <view class="form-section">
          <text class="section-title">位置信息</text>
          
          <view class="form-item">
            <text class="form-label">位置 <text class="required">*</text></text>
            <view class="location-display" v-if="facilityData.address">
              <text class="location-text">{{ facilityData.address }}</text>
              <button class="change-btn" @click="chooseLocation">更改</button>
            </view>
            <button v-else class="location-btn" @click="chooseLocation">选择位置</button>
          </view>
          
          <view class="form-item">
            <text class="form-label">楼层/区域</text>
            <input class="form-input" v-model="facilityData.floor" placeholder="例如: 3楼、A区" />
          </view>
          
          <view class="form-item">
            <text class="form-label">开放时间</text>
            <input class="form-input" v-model="facilityData.openTime" placeholder="例如: 9:00-18:00" />
          </view>
        </view>
        
        <view class="form-section">
          <text class="section-title">设施图片</text>
          
          <view class="form-item">
            <view class="image-uploader">
              <view class="uploaded-images">
                <view 
                  v-for="(img, index) in facilityData.images" 
                  :key="index"
                  class="uploaded-image-item"
                >
                  <image :src="img" class="uploaded-image" mode="aspectFill"></image>
                  <text class="delete-image" @click="removeImage(index)">×</text>
                </view>
                
                <view class="upload-btn" @click="chooseImage" v-if="facilityData.images.length < 5">
                  <text class="iconfont icon-camera"></text>
                  <text class="upload-text">添加图片</text>
                </view>
              </view>
              <text class="upload-hint">最多上传5张图片</text>
            </view>
          </view>
        </view>
        
        <view class="form-section">
          <text class="section-title">设施状态</text>
          
          <view class="form-item">
            <text class="form-label">状态</text>
            <picker mode="selector" :range="statusOptions" @change="onStatusChange">
              <view class="status-display">
                <text>{{ statusOptions[facilityData.status] }}</text>
                <text class="iconfont icon-right"></text>
              </view>
            </picker>
          </view>
          
          <view class="form-item" v-if="facilityData.status === 2">
            <text class="form-label">维修说明</text>
            <textarea class="form-textarea" v-model="facilityData.statusDescription" placeholder="请说明设施维修原因或预计修好时间" />
          </view>
        </view>
      </view>
      
      <!-- 添加额外的padding底部间距，确保滚动到底部时有足够的空间 -->
      <view style="height: 150rpx;"></view>
    </scroll-view>
    
    <!-- 底部提交区域固定在页面底部 -->
    <view class="submit-area">
      <button class="submit-btn" @click="saveFacility">保存点位</button>
    </view>
  </view>
</template>

<script>
import { useFacilityStore } from '@/store/facilityStore';
import { storeToRefs } from 'pinia';

export default {
  setup() {
    const facilityStore = useFacilityStore();
    return { facilityStore };
  },
  
  data() {
    return {
      scrollHeight: 'calc(100vh - 180rpx)', // 减去头部和底部的高度
      isEditing: false,
      facilityId: null,
      facilityData: {
        type: '',
        name: '',
        description: '',
        address: '',
        position: null,
        floor: '',
        openTime: '',
        images: [],
        status: 0, // 0-正常使用，1-临时关闭，2-维修中
        statusDescription: ''
      },
      facilityTypes: [
        { 
          name: '无障碍坡道', 
          value: 'ramp', 
          icon: '<svg viewBox="0 0 1092 1024" xmlns="http://www.w3.org/2000/svg"><path d="M468.923816 458.002148c140.873755 1.549373 112.865859-11.203158 155.890754 113.580955 20.737761 59.591267 40.164514 120.731906 59.591266 181.276633 7.627682 23.836507 11.918253 47.673013-18.115745 56.850069s-41.475522-9.89215-49.699116-33.37111c-23.240594-65.788759-46.957918-131.100787-69.245052-197.723823-6.793404-20.141848-16.208825-28.24626-38.853506-27.650348-68.649139 1.549373-137.298279 0-205.947418 0-52.559497 0-78.064559-16.92392-86.884067-68.053226-14.421087-83.427773-25.624245-168.643285-34.682117-253.501249-3.933024-35.75476 11.918253-66.027124 52.321132-73.773988a69.006687 69.006687 0 0 1 84.619599 51.725219c5.244031 19.784301 8.700325 101.543519 75.204178 100.113328 28.722991-0.595913 48.864839 0 73.178076 1.072643 19.069205 0.95346 31.702554 9.653785 31.345006 31.225824s-13.467626 29.080538-32.298466 29.795633c-27.411983 0.834278-54.943148 0-82.355131 0.595913-14.421087 0-34.086205 0-33.371109 20.261031 1.072643 30.749094-11.918253 63.285925 32.298466 67.338131 28.842173 2.383651 58.041894 0.238365 87.00325 0.238365zM333.770823 66.129978a68.410774 68.410774 0 0 1-65.907941 71.50952 70.07933 70.07933 0 0 1-71.50952-71.50952A68.887504 68.887504 0 0 1 263.572311 0.102855a66.503854 66.503854 0 0 1 70.198512 66.027123z" p-id="1046"></path><path d="M263.572311 832.235304A262.201574 262.201574 0 0 1 122.579373 348.115852a27.531165 27.531165 0 0 1 29.676451 46.362006 207.735156 207.735156 0 1 0 317.383087 205.232323 27.531165 27.531165 0 0 1 54.466418 7.985229A264.108494 264.108494 0 0 1 263.572311 832.235304zM1.370737 1024l1091.473642-252.666971v252.666971H1.370737z" p-id="1047"></path></svg>' 
        },
        { 
          name: '无障碍卫生间', 
          value: 'toilet', 
          icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M860.16 0a163.84 163.84 0 0 1 163.84 163.84v696.32a163.84 163.84 0 0 1-163.84 163.84H163.84a163.84 163.84 0 0 1-163.84-163.84V163.84a163.84 163.84 0 0 1 163.84-163.84h696.32z m-43.4176 579.584a21.7088 21.7088 0 0 0-29.9008 4.9152 20.48 20.48 0 0 0 4.9152 29.9008 116.736 116.736 0 0 1 48.3328 94.6176 119.1936 119.1936 0 0 1-119.1936 117.5552l-7.9872-0.28672a122.88 122.88 0 0 1-92.7744-52.55168 22.1184 22.1184 0 0 0-29.9008-5.7344 21.2992 21.2992 0 0 0-6.144 29.9008l5.61152 7.74144a163.84 163.84 0 0 0 130.37568 63.52896h2.8672a163.84 163.84 0 0 0 162.2016-159.3344 158.9248 158.9248 0 0 0-68.4032-130.2528z m-114.0736-122.22464a70.0416 70.0416 0 0 0-21.9136 136.56064v9.0112H606.208a21.2992 21.2992 0 0 0-18.432 10.6496 22.1184 22.1184 0 0 0 18.432 32.768h75.3664v25.3952a2.4576 2.4576 0 0 1-2.4576 0h-72.0896a22.9376 22.9376 0 0 0-15.1552 6.144l-45.056 44.2368-20.48-20.48a22.1184 22.1184 0 0 0-37.2736 15.5648 21.2992 21.2992 0 0 0 6.5536 15.1552l36.0448 35.2256a20.48 20.48 0 0 0 14.7456 6.5536l3.93216-0.45056a22.528 22.528 0 0 0 10.40384-5.28384l53.6576-53.248h64.7168a45.4656 45.4656 0 0 0 45.4656-45.056V593.92a70.0416 70.0416 0 0 0-21.9136-136.56064z m-251.0848-297.82016A56.5248 56.5248 0 0 0 435.8144 270.336a122.88 122.88 0 0 0-61.0304 25.3952 19.2512 19.2512 0 0 0-6.144 14.336v136.3968a20.48 20.48 0 0 1 0.6144 6.9632l-0.57344 3.19488 0.53248 2.94912a20.0704 20.0704 0 0 0 2.90816 6.30784l2.2528 2.70336c3.6864 3.6864 8.72448 5.7344 13.9264 5.7344h10.6496l11.4688 138.8544c0.49152 6.9632 4.5056 13.1072 10.6496 16.384a22.1184 22.1184 0 0 0 8.6016 0l-0.4096-0.4096a18.0224 18.0224 0 0 0 11.0592-3.6864 18.432 18.432 0 0 0 7.7824-18.0224l-12.6976-156.4672a19.6608 19.6608 0 0 0-18.8416-18.432h-10.24V319.488c28.2624-16.384 63.0784-16.384 91.3408 0v113.0496h-9.4208a19.2512 19.2512 0 0 0-18.8416 18.0224l-13.1072 155.2384a19.6608 19.6608 0 0 0 8.192 18.0224 18.432 18.432 0 0 0 11.0592 3.2768l2.8672-0.32768a15.9744 15.9744 0 0 0 5.3248-2.12992 20.48 20.48 0 0 0 11.0592-15.9744l11.0592-138.8544h10.6496c10.6496 0 19.2512-8.6016 19.2512-19.2512V309.6576a19.6608 19.6608 0 0 0-6.9632-14.7456 122.88 122.88 0 0 0-61.44-24.576 56.5248 56.5248 0 0 0-15.7696-110.7968zM286.72 163.84a56.1152 56.1152 0 0 0-76.5952 74.1376c6.51264 15.52384 19.53792 27.36128 35.6352 32.3584a50.7904 50.7904 0 0 0-40.96 33.5872L160.1536 446.464a20.8896 20.8896 0 0 0 3.6864 17.2032c3.6864 4.9152 9.4208 7.7824 15.5648 7.7824h29.4912l11.4688 138.8544a20.48 20.48 0 0 0 20.48 18.0224 18.0224 18.0224 0 0 0 13.1072-6.9632 18.432 18.432 0 0 0 4.5056-13.9264L245.76 450.56a19.6608 19.6608 0 0 0-18.0224-18.0224H204.8l34.816-117.1456c0.4096-0.8192 4.9152-8.192 24.576-8.192s24.576 7.7824 24.576 7.7824l34.4064 117.5552h-23.3472a19.2512 19.2512 0 0 0-18.8416 18.0224l-12.6976 156.8768a18.8416 18.8416 0 0 0 4.9152 14.336 20.48 20.48 0 0 0 13.5168 6.5536h1.2288a20.48 20.48 0 0 0 18.8416-18.432l11.4688-138.8544h31.9488c6.144 0 11.8784-2.8672 15.5648-7.7824a20.48 20.48 0 0 0 2.8672-6.38976l0.04096-0.24576L368.64 456.13056V446.464L326.8608 303.9232a51.6096 51.6096 0 0 0-45.056-34.4064A56.1152 56.1152 0 0 0 286.72 163.84z m415.744 338.7392a25.3952 25.3952 0 0 1 25.8048 24.9856 24.9856 24.9856 0 0 1-25.3952 25.8048l-4.13696-0.57344a25.8048 25.8048 0 0 1-0.77824-50.21696zM264.27392 198.69696l3.19488 0.57344c7.41376 2.17088 12.6976 9.0112 12.6976 16.9984a18.0224 18.0224 0 0 1-15.5648 17.6128 17.6128 17.6128 0 0 1 0-35.2256l-0.32768 0.04096zM450.56 198.2464a18.0224 18.0224 0 0 1 6.5536 34.4064 17.6128 17.6128 0 0 1-19.2512-4.5056 16.7936 16.7936 0 0 1-3.2768-19.6608 17.6128 17.6128 0 0 1 15.9744-10.24z" fill="currentColor" p-id="1190"></path></svg>' 
        },
        { 
          name: '无障碍电梯', 
          value: 'elevator', 
          icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M96 96a32 32 0 0 0-32 32v768a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32V128a32 32 0 0 0-32-32H96z m127.552 551.008c0 64.96 53.376 117.44 119.136 117.44a118.432 118.432 0 0 0 116.096-93.184l21.184 36.16a150.656 150.656 0 0 1-137.28 88.16C259.392 795.552 192 729.024 192 646.976c0-53.248 28.544-99.36 71.168-125.6l2.208 36.704a116.384 116.384 0 0 0-41.824 88.896z m344.096-60.928l3.904 164.736c8.832 16.192 4.192 35.424-11.392 44.736-15.68 9.28-36.544 3.328-45.536-11.2l-1.536-128.32h-164.832c-29.92 0-55.232-21.12-57.696-50.944l-9.984-169.824a54.688 54.688 0 0 1 51.808-57.152 55.136 55.136 0 0 1 57.792 50.848l3.712 40.768 115.712 31.808c14.4 0.48 25.6 11.36 25.6 25.408 0 14.176-11.52 24.736-25.6 25.568l-112.736-31.84 1.408 49.6h141.952c10.912 0.32 21.44 5.92 27.424 15.808zM397.76 312c0 30.56-25.28 55.936-56.736 55.936-31.328 0-56.768-25.344-56.768-55.968 0-31.04 25.44-55.936 56.768-55.936 31.424 0 56.736 24.928 56.736 55.968zM784 352l80 128h-160l80-128z m0 320L704 560h160L784 672z" fill="currentColor" p-id="1333"></path></svg>' 
        },
        { 
          name: '盲道', 
          value: 'road', 
          icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M950.853818 1024H73.146182A73.239273 73.239273 0 0 1 0 950.853818V73.146182A73.239273 73.239273 0 0 1 73.146182 0h877.707636A73.239273 73.239273 0 0 1 1024 73.146182v877.707636A73.239273 73.239273 0 0 1 950.853818 1024zM93.090909 93.090909v868.840727h868.840727V93.090909H93.090909z m775.749818 775.749818h-155.136V744.727273h-124.136727v124.113454h-155.136V744.727273h-124.136727v-31.022546H279.272727v-124.136727H155.159273v-155.136H279.272727v-124.136727H155.159273V155.159273h155.136V279.272727h124.136727V155.159273h155.136V279.272727h124.136727v31.022546H744.727273v124.136727h124.113454v155.136H744.727273v124.136727h124.113454v155.136zM713.704727 744.727273H744.727273v-31.022546h-31.022546V744.727273z m-279.272727-31.022546h155.136v-124.136727h-155.136v-155.136h-124.136727v155.136h124.136727v124.136727z m155.136-124.136727h124.136727v-155.136h-124.136727v-124.136727h-155.136v124.136727h155.136v155.136zM279.272727 310.295273h31.022546V279.272727H279.272727v31.022546z m31.022546 558.545454H155.159273v-155.136H279.272727V744.727273h31.022546v124.113454z m558.545454-558.545454H744.727273V279.272727h-31.022546V155.159273h155.136v155.136z" fill="currentColor" p-id="1476"></path></svg>' 
        }
      ],
      statusOptions: ['正常使用', '临时关闭', '维修中']
    };
  },
  
  onLoad(options) {
    // 设置屏幕高度
    this.setScrollHeight();
    
    // 尝试从临时存储获取位置数据
    try {
      const tempPositionStr = uni.getStorageSync('temp_facility_position');
      if (tempPositionStr) {
        const tempPosition = JSON.parse(tempPositionStr);
        // 验证位置数据
        if (tempPosition && !isNaN(tempPosition.lat) && !isNaN(tempPosition.lng)) {
          this.facilityData.position = {
            lat: parseFloat(tempPosition.lat),
            lng: parseFloat(tempPosition.lng)
          };
        
        // 获取地址
        this.getAddressByLocation(this.facilityData.position);
        } else {
          console.error('临时位置数据无效:', tempPosition);
        }
        
        // 清除临时存储
        uni.removeStorageSync('temp_facility_position');
      }
    } catch (e) {
      console.error('读取临时位置数据失败:', e);
    }
    
    // 如果传入了位置数据
    if (options.lat && options.lng) {
      // 解析并验证经纬度
      const lat = parseFloat(options.lat);
      const lng = parseFloat(options.lng);
      
      // 确保值是有效的数字
      if (!isNaN(lat) && !isNaN(lng)) {
        this.facilityData.position = { lat, lng };
      
      // 获取地址
      this.getAddressByLocation(this.facilityData.position);
      } else {
        console.error('URL参数中的经纬度无效:', options);
        uni.showToast({
          title: '位置数据无效',
          icon: 'none'
        });
      }
    }
    
    // 如果是编辑现有设施
    if (options.id) {
      this.isEditing = true;
      this.facilityId = options.id;
      this.loadFacilityData();
    }
    
    // 如果指定了设施类型
    if (options.type) {
      this.facilityData.type = options.type;
    }

    // 应用中初始化
    this.initApp();
  },
  
  methods: {
    // 设置滚动区域高度
    setScrollHeight() {
      const systemInfo = uni.getSystemInfoSync();
      // 计算滚动区域高度 = 屏幕高度 - 头部高度 - 底部高度
      // 头部约80rpx，底部约120rpx，转换为px
      const headerHeight = uni.upx2px(90);
      const footerHeight = uni.upx2px(130);
      const scrollHeight = systemInfo.windowHeight - headerHeight - footerHeight;
      this.scrollHeight = scrollHeight + 'px';
    },
    
    // APP特殊初始化方法
    initApp() {
      // 设置默认值以确保页面有内容显示
      if (!this.facilityData.type) {
        this.facilityData.type = 'ramp';
      }
      
      // 检查环境是否为APP，并设置特定配置
      // #ifdef APP-PLUS
      // 强制页面刷新
      setTimeout(() => {
        uni.showToast({
          title: '加载完成',
          icon: 'none',
          duration: 500
        });
      }, 500);
      // #endif
    },
    
    loadFacilityData() {
      const facility = this.facilityStore.getFacilityById(this.facilityId);
      if (facility) {
        this.facilityData = { ...facility };
      } else {
        uni.showToast({
          title: '设施不存在',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    },
    
    selectType(type) {
      console.log("选择设施类型:", type);
      this.facilityData.type = type;
    },
    
    chooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          this.facilityData.address = res.name || res.address;
          this.facilityData.position = {
            lat: res.latitude,
            lng: res.longitude
          };
        },
        fail: (err) => {
          console.error("选择位置失败:", err);
          // 在APP环境中提供更明确的错误反馈
          uni.showToast({
            title: "选择位置失败",
            icon: 'none'
          });
        }
      });
    },
    
    async getAddressByLocation(position) {
      try {
        // 验证位置有效性
        if (!position || isNaN(position.lat) || isNaN(position.lng)) {
          console.error('位置数据无效:', position);
          this.facilityData.address = '位置数据无效';
          return;
        }
        
        // 格式化经纬度，确保是有效数字
        const lat = parseFloat(position.lat.toFixed(6));
        const lng = parseFloat(position.lng.toFixed(6));
        
        // 对于APP环境，使用简化的地址获取方法
        // #ifdef APP-PLUS
        this.facilityData.address = '位置 (经度:' + lng + ', 纬度:' + lat + ')';
        return;
        // #endif
        
        // 对于其他环境，尝试使用高德地图API
        if (typeof window !== 'undefined' && window.AMap && window.AMap.Geocoder) {
          // 使用高德地图API获取地址
          const geocoder = new window.AMap.Geocoder();
          geocoder.getAddress([lng, lat], (status, result) => {
            if (status === 'complete' && result.info === 'OK') {
              const address = result.regeocode.formattedAddress;
              console.log('获取到地址:', address);
              this.facilityData.address = address;
            } else {
              console.warn('地址解析失败:', status, result);
              this.facilityData.address = '未知位置';
            }
          });
        } else {
          // 回退到简单的模拟方式
          this.facilityData.address = '正在获取地址...';
          setTimeout(() => {
            this.facilityData.address = '附近位置 (经度:' + lng + ', 纬度:' + lat + ')';
          }, 1000);
        }
      } catch (error) {
        console.error('地址解析错误:', error);
        this.facilityData.address = '未知位置';
      }
    },
    
    chooseImage() {
      const maxCount = 5 - this.facilityData.images.length;
      uni.chooseImage({
        count: maxCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.facilityData.images = [...this.facilityData.images, ...res.tempFilePaths];
        }
      });
    },
    
    removeImage(index) {
      this.facilityData.images.splice(index, 1);
    },
    
    onStatusChange(e) {
      this.facilityData.status = parseInt(e.detail.value);
      if (this.facilityData.status !== 2) {
        this.facilityData.statusDescription = '';
      }
    },
    
    validateForm() {
      if (!this.facilityData.type) {
        uni.showToast({
          title: '请选择设施类型',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.facilityData.name) {
        uni.showToast({
          title: '请输入设施名称',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.facilityData.position || !this.facilityData.address) {
        uni.showToast({
          title: '请选择设施位置',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    saveFacility() {
      console.log("尝试保存设施:", this.facilityData);
      if (!this.validateForm()) {
        return;
      }
      
      if (this.isEditing) {
        // 更新设施
        const updated = this.facilityStore.updateFacility(this.facilityId, this.facilityData);
        if (updated) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          });
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: '更新失败',
            icon: 'none'
          });
        }
      } else {
        // 添加设施
        const facility = this.facilityStore.addFacility(this.facilityData);
        if (facility) {
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          });
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: '添加失败',
            icon: 'none'
          });
        }
      }
    },
    
    cancel() {
      uni.navigateBack();
    },
    
    navigateToOther() {
      uni.navigateTo({
        url: '/pages/facility/other'
      });
    }
  }
};
</script>

<style>
.facility-add-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f7f8fa, #eef0f5);
  position: relative;
  overflow: hidden;
}

.form-header {
  background: linear-gradient(to right, #fff, #f9fafc);
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f0f2f5;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  z-index: 10;
  position: relative;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transition: all 0.2s ease;
  transform: scale(1);
  position: relative;
  z-index: 100;
}

.back-btn:active {
  transform: scale(0.92);
  background-color: rgba(245, 245, 245, 0.8);
}

.back-icon {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #3F7BFC;
  flex: 1;
  text-align: center;
  margin-right: 60rpx; /* 为了平衡左侧按钮空间 */
}

.form-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 增加iOS平滑滚动 */
}

.form-content {
  padding: 20rpx 30rpx;
  padding-bottom: 120rpx; /* 确保内容底部有足够空间 */
}

.form-section {
  background: linear-gradient(to bottom, #fff, #f9fafc);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-section:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #3F7BFC;
  margin-bottom: 30rpx;
  display: block;
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 24rpx;
  background: linear-gradient(to bottom, #4B89FD, #3F7BFC);
  border-radius: 3rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.required {
  color: #ff5252;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  transition: all 0.3s ease;
  color: #333;
}

.form-input:focus, .form-textarea:focus {
  border-color: #3F7BFC;
  box-shadow: 0 0 0 2px rgba(63, 123, 252, 0.1);
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  transition: all 0.3s ease;
  color :black;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  background-color: #fff;
  transition: all 0.3s ease;
  transform: scale(1);
  position: relative;
  z-index: 1;
}

.type-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
  color: #3F7BFC;
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.type-icon svg {
  width: 100%;
  height: 100%;
}

.type-item.active {
  border-color: #3F7BFC;
  background: linear-gradient(to bottom, rgba(63, 123, 252, 0.1), rgba(63, 123, 252, 0.05));
  box-shadow: 0 2rpx 8rpx rgba(63, 123, 252, 0.1);
}

.type-item:active {
  transform: scale(0.97);
}

.other-type {
  border: 1px dashed #ddd;
}

.other-type .type-icon {
  color: #999;
}

.other-type:active .type-icon {
  color: #666;
}

.type-name {
  font-size: 24rpx;
  color: #333;
}

.location-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  transition: all 0.3s ease;
}

.location-display:active {
  background-color: #f9fafc;
  border-color: #ccc;
}

.location-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.change-btn {
  margin: 0;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  background: linear-gradient(135deg, #f5f7fa, #f0f2f5);
  color: #666;
  border-radius: 10rpx;
  transition: all 0.3s ease;
  transform: scale(1);
}

.change-btn:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, #f0f2f5, #e8e8e8);
}

.location-btn {
  width: 100%;
  background: linear-gradient(to right, #f7f8fa, #f0f2f5);
  border: 1px solid #ddd;
  color: #666;
  font-size: 28rpx;
  padding: 20rpx 0;
  border-radius: 10rpx;
  transition: all 0.3s ease;
  transform: translateY(0);
}

.location-btn:active {
  transform: translateY(2rpx);
  background: linear-gradient(to right, #f0f2f5, #e8e8e8);
}

.image-uploader {
  
}

.uploaded-images {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.uploaded-image-item {
  position: relative;
  width: calc(25% - 20rpx);
  margin: 10rpx;
  aspect-ratio: 1;
  transform: scale(1);
  transition: transform 0.3s ease;
  overflow: hidden;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.uploaded-image-item:active {
  transform: scale(0.97);
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
  transition: transform 0.3s ease;
}

.uploaded-image-item:hover .uploaded-image {
  transform: scale(1.05);
}

.delete-image {
  position: absolute;
  top: -15rpx;
  right: -15rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 36rpx;
  text-align: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF5A5A, #F56C6C);
  color: #fff;
  font-size: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(245, 108, 108, 0.3);
  z-index: 2;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.delete-image:active {
  transform: scale(0.9);
}

.upload-btn {
  width: calc(25% - 20rpx);
  margin: 10rpx;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ddd;
  border-radius: 10rpx;
  background-color: #fff;
  transition: all 0.3s ease;
  transform: scale(1);
}

.upload-btn:active {
  transform: scale(0.95);
  background-color: #f9fafc;
  border-color: #ccc;
}

.icon-camera {
  font-size: 48rpx;
  color: #999;
  margin-bottom: 10rpx;
  transition: all 0.3s ease;
}

.upload-btn:active .icon-camera {
  color: #666;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
  transition: all 0.3s ease;
}

.upload-btn:active .upload-text {
  color: #666;
}

.upload-hint {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.status-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  transition: all 0.3s ease;
}

.status-display:active {
  background-color: #f9fafc;
  border-color: #ccc;
}

.submit-area {
  padding: 20rpx 40rpx;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), #f9fafc);
  border-top: 1px solid #f0f2f5;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #4B89FD, #3F7BFC);
  color: white;
  border-radius: 50rpx;
  font-size: 34rpx;
  font-weight: 500;
  height: 90rpx;
  line-height: 90rpx;
  box-shadow: 0 8rpx 20rpx rgba(63, 123, 252, 0.3);
  transition: all 0.3s ease;
  transform: scale(1);
  letter-spacing: 4rpx;
  position: relative;
  overflow: hidden;
  border: none;
  margin: 0;
  padding: 0;
}

.submit-btn:active {
  transform: scale(0.96);
  background: linear-gradient(135deg, #3F7BFC, #3062D6);
  box-shadow: 0 4rpx 10rpx rgba(63, 123, 252, 0.2);
}

.submit-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  border: none;
}

.submit-btn:active::after {
  transform: scale(2);
  opacity: 1;
}

.form-actions {
  display: none;
}

/* 确保表单项触摸反馈 */
.form-input:active, .form-textarea:active, .location-display:active,
.type-item:active, .status-display:active, .upload-btn:active {
  opacity: 0.8;
}
</style> 